<template>
    <div id="dpaIndexMap-mapDiv" class="ol-popup">
      <!-- 显示控件 -->
      <div id="dpaIndexMap-setDivPosition"  class="init-setDivPosition">
        <!-- 切换卫星和街道地图 -->
        <p @click="switchMap" class="init-setDivPosition-selected">
          <template v-if="switchMapBool==false">
            <img src="@/assets/map/image/newImage/icon-weixing.png" title="切换卫星地图"><br/><span>卫星图</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/newImage/icon-weixing.png" title="切换街道地图"><br/><span>街道图</span>
          </template>
        </p>
        <!-- 返回主界面 -->
        <p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==true }">
          <img src="@/assets/map/image/newImage/icon-home.png" title="返回主界面"><br/><span>主界面</span>
        </p>
        <!-- 显示工具箱 -->
        <p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
          <template v-if="showHideToolsBox">
            <img src="@/assets/map/image/newImage/icon-toolbox.png" title="打开工具箱"><br/>
            <span :class="{ 'init-spanBottom': pageType=='' }">工具箱</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/newImage/icon-toolbox.png" title="关闭工具箱"><br/>
            <span :class="{ 'init-spanBottom': pageType=='' }">工具箱</span>
          </template>
        </p>
        <!-- <template v-if="pageType=='分布规律分析页面'">
          规律分析
          <p @click="showPattenAnalysis" :class="{ 'init-setDivPosition-selected': showPattenAnalysisBool==true }">
            <img src="@/assets/map/image/newImage/icon-pattenAnalysis.png" title="规律分析"><br/><span>规律分析</span>
          </p>
        </template> -->
        <!-- 单孔结果 -->
        <p @click="showHideSingleResults" :class="{ 'init-setDivPosition-selected': showSingleResults==true }">
<!--          <img src="@/assets/map/image/icon-单孔结果.png" title="单孔结果"><br/>-->
<!--          <span :class="{ 'init-spanBottom': pageType=='' }">单孔结果</span>-->
          <img src="@/assets/map/image/icon-单孔结果.png" title="钻孔结果"><br/>
          <span :class="{ 'init-spanBottom': pageType=='' }">钻孔结果</span>
        </p>
        <!-- 区域结果 -->
        <p @click="showHideAreaResults" :class="{ 'init-setDivPosition-selected': showAreaResults==true }">
          <img src="@/assets/map/image/icon-区域结果.png" title="区域结果"><br/>
          <span :class="{ 'init-spanBottom': pageType=='' }">区域结果</span>
        </p>
        <!-- 图件生成 -->
        <p @click="showImgcreate" :class="{ 'init-setDivPosition-selected': showImgcreateBool==true }">
          <img src="@/assets/map/image/newImage/icon-imgcreate.png" title="生成图片"><br/>
          <span :class="{ 'init-spanBottom': pageType=='' }">生成图件</span>
        </p>
        <!-- 返回评估页面 -->
        <p @click="returnLastPage" :class="{ 'init-setDivPosition-selected': isReturnLastPage==true }">
          <img src="@/assets/map/image/icon-返回评估页面.png" title="返回页面"><br/>
          <span style="border:0;">返回页面</span>
        </p>
      </div>
      <!-- 工具箱 -->
      <div id="dpaIndexMap-ToolsBoxDiv" class="init-ToolsBoxDiv">
        <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
          <template v-if="showHideMeasureTool">
            <img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
          </template>
          <template v-else>
            <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
          </template>
        </p>
        <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
          <template v-if="showHidePositionTool">
            <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
          </template>
          <template v-else>
            <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
          </template>
        </p>
      </div>
      <!-- 所有工具 -->
      <div id="dpaIndexMap-AllToolsDiv" class="init-AllToolsDiv">
        <!-- 测量工具 -->
        <div id="dpaIndexMap-MeasureToolsDiv" class="init-AllToolsDivFloat">
          <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
            <template v-if="measureDistanceBool">
              <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
            </template>
          </p>
          <p class="init-AllToolsDiv-split"></p>
          <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
            <template v-if="measureAreaBool">
              <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
            </template>
          </p>
          <p class="init-AllToolsDiv-split"></p>
          <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
            <template v-if="stopMeasureBool">
              <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
            </template>
          </p>
          <p class="init-AllToolsDiv-split"></p>
          <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
            <template v-if="clearMeasureBool">
              <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
            </template>
          </p>
        </div>
        <!-- 定位工具 -->
        <div id="dpaIndexMap-MousePositionDiv">
          <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
          <input id="dpaIndexMap-MousePositionLon" type="text" value="">
          <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
          <input id="dpaIndexMap-MousePositionLat" type="text" value="">
          <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
            <template v-if="clearPositionBool">
              <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
            </template>
          </p>
          <p class="init-AllToolsDiv-split"></p>
          <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
            <template v-if="addPositionBool">
              <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
            </template>
            <template v-else>
              <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
            </template>
          </p>
        </div>
      </div>
      <!-- 弹出窗口 -->
      <!--<div id="dpaIndexMap-popup" class="new-ol-popup">
        <a href="#" id="dpaIndexMap-popup-closer" class="new-ol-popup-closer"></a>
        <div id="dpaIndexMap-popup-content"></div>
      </div>-->
      <!--右键菜单-->
      <div id="dpaIndexMap-contextmenu" class="new-popover" style="display:none;">
        <div class="new-triangle"></div>
        <div class="new-contextmenu">
          <p @click="getAllDrawGeomEmit"><span>分布规律分析</span></p>
          <div v-show="selectFeatureType=='Polygon' || selectFeatureType=='CircleDraw'"></div>
          <p v-show="selectFeatureType=='CircleDraw'" @click="setCircleRadius"><span>设置圆半径</span></p>
          <div v-show="selectFeatureType=='CircleDraw'"></div>
          <p v-show="selectFeatureType=='Polygon' || selectFeatureType=='CircleDraw'" @click="editDrawGeom">
            <span v-if="editGeomBool==false">开启修改区域</span>
            <span v-else>完成修改区域</span>
          </p>
          <div v-show="selectFeatureType=='Polygon' || selectFeatureType=='CircleDraw'"></div>
          <p  v-show="selectFeatureType=='Polygon' || selectFeatureType=='CircleDraw'" @click="deleteDrawGeom"><span>删除区域</span></p>
        </div>
      </div>
      <div style="display:none;" id="dpaIndexMap-popup" class="new-ol-popup">
        <div id="dpaIndexMap-popup-content"></div>
      </div>
      <!--设置圆半径-->
      <el-dialog title="设置圆半径" v-model="circleRadiusDialogBool" width="320px" top="200px" append-to-body>
        <div style="padding:20px;">
          <p>
            <span style="font-weight:bold;">半径（米）</span>
            <el-input style="width:170px" v-model="circleRadiusNum" placeholder="请输入半径" clearable />
          </p>
          <p style="text-align: center"><el-button @click="setCircleRadius" type="primary">确定</el-button></p>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import '@/assets/map/ol/ol.css';
  import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
    getRESTLayer,getVectorTileLayer,iServerHttp,meterToDegree,degreeToMeter } from "@/map/projMap.js";
  import {MapService,GetFeaturesByGeometryParameters, QueryBySQLParameters, QueryService, FeatureService, GetFeaturesBySQLParameters, } from "@supermap/iclient-ol";
  import VectorLayer from 'ol/layer/Vector';
  import {Vector as VectorSource} from 'ol/source'
  import {Control} from 'ol/control';
  // import ScaleLine from 'ol/control/ScaleLine';
  import WKT from 'ol/format/WKT';
  import GeoJSON from 'ol/format/GeoJSON';
  import Overlay from 'ol/Overlay';
  import Feature from 'ol/Feature';
  import Point from 'ol/geom/Point';
  import Polygon from 'ol/geom/Polygon';
  import LineString from 'ol/geom/LineString';
  import Circle from 'ol/geom/Circle';
  import CircleDraw from 'ol/geom/Circle';
  import {fromCircle} from 'ol/geom/Polygon';
  import {Fill, Stroke, Style, Icon, Circle as CircleStyle,Text} from 'ol/style';
  import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
  import {getArea, getLength} from 'ol/sphere';
  import {unByKey} from 'ol/Observable';
  import {boundingExtent} from 'ol/extent';
  import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
  import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
  
  export default {
    name: "ControlToolBar",
    components: {
  
    },
    props:{
      map:{//地图对象
        type: Object,
        required:false,
        default: {}
      },
      pageType:{
        type: String,
        required:false,
        default: ""
      },
      mapDrawType: {//是否开启地图圈选查询
        type:String,
        required:false,
        default: ""
      },
      intensityType: {
        type: String,
        required: true,
        default: ''
      },
      dtcvId: {
        type: String,
        required: true,
        default: ''
      },
      taskGoem: {
        type: String,
        required: true,
        default: ''
      }
    },
    emits:["showPattenAnalysis","showImgcreate","mapLoading","getAllDrawGeom", 'showEvaluateResultSelect','getLegendHtml', 'returnSetPage'],
    data() {
      return {
        str: "dpaIndexMap",
        center: [105, 34],
        zoom: 4,
        mapLoadingBool:false,//是否正在查询参数
        zoomDefaultPositionBool:true,//显示主界面
        switchMapBool:false,//切换地图
        layer1:null,//天地图街道图
        layer2:null,
        layer3:null,//天地图卫星图
        layer4:null,
        draw:null,//矢量绘制
        snap:null,
        select:null,
        modify:null,
        drag:null,
        source:null,//矢量绘制图层数据
        measureSource:null,//测量结果图层数据
        measure:null,//测量工具
        sketch:null,
        helpTooltipElement:null,
        helpTooltip:null,
        measureTooltipElement:null,
        measureTooltip:null,
        measureTooltipArray:[],//全部测量结果Overlay数组
        showHideMeasureTool:true,//显示|隐藏测量工具
        measureDistanceBool:true,
        measureAreaBool:true,
        stopMeasureBool:true,
        clearMeasureBool:true,
        showHidePositionTool:true,//显示|隐藏定位工具
        addPositionBool:true,
        clearPositionBool:true,
        popupInfoLayer:null,//弹出窗口
        showHideToolsBox:true,
        overlay: null,
        //addressMatchService:null,//地址匹配
        addressUrl:"https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
        selectFeature:null,//选中要素
        //分布规律分析页面
        showPattenAnalysisBool:false,//是否打开规律分析按钮
        showSingleResults:false, //是否打开单孔结果按钮
        showAreaResults:false, //是否打开区域结果按钮
        showImgcreateBool:false,//是否打开生成图件按钮
        isReturnLastPage:false,//是否点击返回评估页面按钮
        queryMapDrawType:"",//是否开启地图圈选参数（StopDraw关闭地图圈选 Polygon多边形绘制 Circle圆形绘制 Clear清空 GetAll获取全部）
        initBool:false,//是否完成初始化工具条控件
        contextmenuLayer:null,//右键弹出窗口
        selectFeatureType:null,//选择的空间数据类型
        circleRadiusNum:0,//设置圆半径（米）
        circleRadiusDialogBool:false,//是否显示设置圆半径弹窗
        editGeomBool:false,//是否开启修改空间数据
        allRestVectorLayerArray: [],
        allRestVectorLayerArrayPoint: [],
        pointOrPolygon: '',
      }
    },
    watch: {
      map: {//地图对象
        handler: function(newVal,oldVal){
          if(newVal!=oldVal){
            console.log("地图对象");
            console.log(newVal);
            //初始化地图基础数据组件信息
            this.initMap();
          }
        },
        immediate:true
      },
      mapDrawType: {//是否开启地图圈选查询
        handler: function(newVal,oldVal){
          if(newVal!=oldVal){
            console.log("是否开启地图圈选查询"+newVal);
            this.queryMapDrawType = newVal;
            this.queryMapEvent();
          }
        },
        immediate:true
      },
      intensityType: {
        handler: function(newVal,oldVal) {
          if(newVal != oldVal) {
            this.showAreaResults = false
          }
          this.showHideAreaResults()
        },
        immediate:true,
      },
      dtcvId: {
        handler: function() {

        }
      },
      taskGoem: {
        handler: function(newVal, oldVal){
          
        },
        immediate: true
      }
    },
    mounted() {
      console.log("mounted地图基础数据组件异步加载");
      let that = this;
      //地图基础数据组件异步加载
      this.$nextTick(function(){
        console.log('地图基础数据组件异步加载');
        //地图基础数据组件异步加载
        setTimeout(() => {
          //初始化地图基础数据组件信息
          that.initMap();
        }, 200);
      });
    },
    methods: {
      initMap() {
        if(this.map!=null && this.map.getSize()!=null){
          if(this.initBool){//是否完成初始化工具条控件
            return;
          }
          console.log('initMap地图基础数据组件异步加载');
          let that = this;
          let mapStr = this.str;
          this.mapLoadingBool = true
  
          //添加天地图图层
          this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
          this.map.addLayer(this.layer1);
          this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
          this.map.addLayer(this.layer2);
          this.layer1.setZIndex(0);
          this.layer2.setZIndex(0);
          //矢量绘制图层
          this.source = new VectorSource({
            wrapX: false
          });
          let vectorLayer = new VectorLayer({
            source: that.source,
            projection: 'EPSG:4490'
          });
          this.map.addLayer(vectorLayer);
          vectorLayer.setZIndex(1);
          //测量结果图层
          this.measureSource = new VectorSource({
            wrapX: false
          });
          let measureLayer = new VectorLayer({
            source: that.measureSource,
            projection: 'EPSG:4490'
          });
          this.map.addLayer(measureLayer);
          measureLayer.setZIndex(1);
          //地图弹窗
          let container = document.getElementById(this.str+'-popup');
          this.overlay = new Overlay(({
            element: container,
            autoPan: true,
            autoPanAnimation: {
              duration: 250
            }
          }));
          this.map.addOverlay(this.overlay);
          this.overlay.setPosition(undefined);
          //添加控件
          let info = new Control({element: document.getElementById(mapStr+'-mapDiv')});
          info.setMap(this.map);
          this.map.addControl(info);
          //右键菜单弹出窗口
          let contextmenuTarget = document.getElementById(this.str+"-contextmenu");
          if(contextmenuTarget){
            this.contextmenuLayer = new Overlay({
              element: contextmenuTarget,
              positioning: 'center-center'
            });
            this.map.addOverlay(this.contextmenuLayer);
            //显示右键菜单
            document.getElementById(that.str+"-contextmenu").style.display="block";
          }
          //右键菜单事件
          this.map.on('contextmenu', function(event){
            event.preventDefault();//屏蔽自带的右键事件
            let pixel = that.map.getEventPixel(event.originalEvent);
            let coordinate = that.map.getEventCoordinate(event.originalEvent);
  
            let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
              //根据像素坐标获取右键选中的地图要素
              return feature;
            });
            if(feature && that.draw==null){
              //选中要素
              that.selectFeature = feature;
              let temp = feature.getProperties();
              if(that.pageType=='分布规律分析页面'){
                if(temp.type=="draw"){//地图圈选
                  let geometry = feature.getGeometry();
                  if (geometry instanceof Polygon) {
                    that.selectFeatureType = "Polygon";
                  }else if (geometry instanceof CircleDraw) {
                    that.selectFeatureType = "CircleDraw";
                  }
                }else if(temp.type=="xzqh"){//行政区划
                  that.selectFeatureType = "xzqh";
                }else if(temp.type=="result"){//计算结果
                  that.selectFeatureType = "result";
                }
                //显示右键菜单
                that.contextmenuLayer.setOffset([10,-30]);
                that.contextmenuLayer.setPosition(coordinate);
              }
            }
          });
          //点击地图事件
          this.map.on('click', function(event){
            //隐藏右键菜单
            that.hideContextMenu();
            //隐藏弹出窗口
            if(that.popupInfoLayer!=null){
              that.popupInfoLayer.setPosition(undefined);
            }
            //隐藏右键菜单窗口
            if(that.contextmenuLayer!=null){
              that.contextmenuLayer.setPosition(undefined);
            }
            let pixel = that.map.getEventPixel(event.originalEvent);
            let coordinate = that.map.getEventCoordinate(event.originalEvent);
            //判断定位工具是否开启状态
            if(that.showHidePositionTool==false){
              document.getElementById(mapStr+"-MousePositionLon").value = coordinate[0];
              document.getElementById(mapStr+"-MousePositionLat").value = coordinate[1];
            }
            let url = iServerHttp() + '/iserver/services/data-fxfzdzzh/rest/data'
            let zoom = that.map.getView().getZoom();
            let temp = Math.pow(2,(18 - zoom));
            //点生成圆多边形
            let meter = 3 * temp;//米
            let degree = meter / (Math.PI * 2 * 6378137 / 360);
            let circle = new CircleDraw(coordinate, degree); // 用圆心和半径确定一个圆
            let polygon = new fromCircle(circle) // 得到一个多边形
            let extent = new Feature({
              geometry: polygon
            });
            let center = extent.getGeometry()
            if(that.showSingleResults) {
              let geometryParam = new GetFeaturesByGeometryParameters({
                datasetNames: ['fxfzdzzh:dzzh_soft_soil_evaluate_result'],
                geometry: center,
                spatialQueryMode: "INTERSECT",
              });
              //向服务器发送请求，并对返回的结果进行处理
              new FeatureService(url).getFeaturesByGeometry(geometryParam, function (serviceResult) {
                //获取返回的features数据
                if (serviceResult.result != undefined && serviceResult.result.features.features.length != 0) {
                  var result = serviceResult.result.features.features[0].properties;
                  console.log(result);
                  let zsStatu
                  if(that.intensityType == '7') {
                    zsStatu = result.IS_SOFT7 == '0' ? '不震陷' : '震陷'
                  }else if(that.intensityType == '8') {
                    zsStatu = result.IS_SOFT8 == '0' ? '不震陷' : '震陷'
                  }else if(that.intensityType == '9') {
                    zsStatu = result.IS_SOFT9 == '0' ? '不震陷' : '震陷'
                  }
                  let innerHTML = zsStatu + "<br>";
                  that.setPopupContent(innerHTML);
                  that.overlay.setPosition(coordinate);
                }else{
                  that.selectMap(center,url,coordinate)
                }
              })
            }else if(that.showAreaResults) {
              that.selectMap(center,url,coordinate)
            }else{
              that.closePopupContent()
            }
            let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
              //根据像素坐标获取右键选中的地图要素
              return feature;
            });
            if(feature && that.draw==null){
              //选中要素
              that.selectFeature = feature;
              let temp = feature.getProperties();
              if(that.pageType=='分布规律分析页面'){
                if(temp.type=="draw"){//地图圈选
                  let geometry = feature.getGeometry();
                  if (geometry instanceof Polygon) {
                    that.selectFeatureType = "Polygon";
                  }else if (geometry instanceof CircleDraw) {
                    that.selectFeatureType = "CircleDraw";
                  }
                }else if(temp.type=="xzqh"){//行政区划
                  that.selectFeatureType = "xzqh";
                }else if(temp.type=="result"){//计算结果
                  that.selectFeatureType = "result";
                }
              }
            }
          });
          //地图移动事件
          this.map.on('moveend', function (event) {
            let center = that.map.getView().getCenter();
            let zoom = that.map.getView().getZoom();
            if(center[0]!=that.center[0] || center[1]!=that.center[1] || zoom!=that.zoom){
              //设置主界面图标文字
              that.zoomDefaultPositionBool = false;
            }else{//主界面
              //设置主界面图标文字
              that.zoomDefaultPositionBool = true;
            }
          });
          //鼠标移动事件--测量工具
          this.map.on('pointermove', function (evt) {
            if (evt.dragging) {
              return;
            }
            if(that.measure!=null){
              let helpMsg = '点击开始绘制';
  
              if (that.sketch) {
                const geom = that.sketch.getGeometry();
                if (geom instanceof Polygon) {
                  helpMsg = '点击继续绘制多边形';
                } else if (geom instanceof LineString) {
                  helpMsg = '点击继续绘制折线';
                }
              }
  
              that.helpTooltipElement.innerHTML = helpMsg;
              that.helpTooltip.setPosition(evt.coordinate);
  
              that.helpTooltipElement.classList.remove('hidden');
            }
          });
          //鼠标移出事件--测量工具
          this.map.getViewport().addEventListener('mouseout', function () {
            if(that.measure!=null){
              that.helpTooltipElement.classList.add('hidden');
            }
          });
          //地址匹配
          //this.addressMatchService = new AddressMatchService(this.addressUrl);
          //地图缩放到权限位置
          this.zoomDefaultPosition();
  
          //是否完成初始化工具条控件
          this.initBool = true;
        }
      },
      selectMap(center,url,coordinate) {
        let that = this
        let geometryParam = new GetFeaturesByGeometryParameters({
          datasetNames: ['fxfzdzzh:dzzh_soft_soil_polygon_evaluate_result'],
          geometry: center,
          spatialQueryMode: "INTERSECT",
          attributeFilter:"dtcv_id='"+this.dtcvId+"' and type='"+this.intensityType+"'",//查询过滤条件
        });
        new FeatureService(url).getFeaturesByGeometry(geometryParam, function (serviceResult) {
          if (serviceResult.result != undefined && serviceResult.result.features.features.length != 0) {
            var result = serviceResult.result.features.features[0].properties;
            let innerHTML = result.VALUE == '0' ? '不震陷' : '震陷' + "<br>";
            that.setPopupContent(innerHTML);
            that.overlay.setPosition(coordinate);
          }else{
            that.closePopupContent()
          }
        })
      },
      closePopupContent() {
        document.getElementById(this.str+"-popup").style.display = "none";
      },
      setPopupContent(html){//设置弹窗内容
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      },
      autodivheight() {//自动获取div高度
        //获取浏览器窗口高度
        let winHeight = 0;
        if (window.innerHeight) {
          winHeight = window.innerHeight;
        } else if ((document.body) && (document.body.clientHeight)) {
          winHeight = document.body.clientHeight;
        }
        //通过深入Document内部对body进行检测，获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight) {
          winHeight = document.documentElement.clientHeight;
        }
        //全屏时窗口高度:864px,地图div高度:754px
        let tempHeight = 864;
        let mapTempHeight = 754;
        let mapHeight = winHeight - tempHeight + mapTempHeight;
        //最小高度
        if(mapHeight<480){
          mapHeight = 480;
        }
        //设置地图高度
        document.getElementById(this.str+"-map").style.height= mapHeight +"px";
        console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
        //resize事件--刷新地图,确保地图不变形
        if(this.map){
          this.map.updateSize();
          console.log("resize事件--刷新地图,确保地图不变形");
        }
      },
      setPopupContent(html){//设置弹窗内容
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      },
      getTextFormat(str){//格式化文本内容
        if(str==null || str==undefined){
          str = "";
        }
        return str;
      },
      hideContextMenu(){//隐藏右键菜单
        //隐藏右键菜单
  
      },
      //切换地图
      switchMap(){
        if(this.switchMapBool){//显示街道图
          this.switchMapBool = false;
          //添加天地图图层
          if(this.layer1==null){
            this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
            this.map.addLayer(this.layer1);
          }
          if(this.layer2==null){
            this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
            this.map.addLayer(this.layer2);
          }
          //显示街道图
          this.layer1.setVisible(true);
          this.layer2.setVisible(true);
          this.layer3.setVisible(false);
          this.layer4.setVisible(false);
          this.layer1.setZIndex(0);
          this.layer2.setZIndex(0);
        }else{//显示卫星图
          this.switchMapBool = true;
          if(this.layer3==null){
            this.layer3 = getTiandituImgMap();//fxpc天地图卫星影像底图
            this.map.addLayer(this.layer3);
          }
          if(this.layer4==null){
            this.layer4 = getTiandituImgText();//fxpc天地图卫星影像注记
            this.map.addLayer(this.layer4);
          }
          //显示卫星图
          this.layer1.setVisible(false);
          this.layer2.setVisible(false);
          this.layer3.setVisible(true);
          this.layer4.setVisible(true);
          this.layer3.setZIndex(0);
          this.layer4.setZIndex(0);
        }
      },
      //地图缩放到权限位置
      zoomDefaultPosition() {
        //刷新地图,确保地图不变形
        this.map.updateSize();
        this.map.getView().setCenter(this.center);
        this.map.getView().setZoom(this.zoom);
        this.zoomDefaultPositionBool = true;
      },
      //显示工具箱
      showHideToolsBoxDiv(){
        if(this.showHideToolsBox){
          this.showHideToolsBox = false;
          document.getElementById(this.str+"-ToolsBoxDiv").style.display="block";
        }else{
          this.showHideToolsBox = true;
          document.getElementById(this.str+"-ToolsBoxDiv").style.display="none";
        }
        //关闭全部工具
        this.closeAllToolsBox(null);
      },
      //显示单孔结果
      showHideSingleResults(){
        this.pointOrPolygon = 'point'
        let layerUrl = iServerHttp() + '/iserver/services/map-fxfzdzzh/rest/maps/dzzh_soft_soil_evaluate_result@fxfzdzzh'
        if(this.showSingleResults){
          this.showSingleResults = false;
          //this.addIserverLayer(params)
          this.deleteTempLayersSet(layerUrl + '/tempLayersSet/' + this.allRestVectorLayerArrayPoint[0].tempLayerId)
        }else{
          this.mapLoading('正在查询，请稍候...')
          this.showSingleResults = true;
          this.deleteIserverLayer(layerUrl,"dtcv_id like '%" + this.dtcvId + "'")
          //this.addIserverLayer(params)
        }
        //关闭全部工具
        this.closeAllToolsBox(null);
      },
      //显示区域结果
      showHideAreaResults(){
        this.pointOrPolygon = 'polygon'
        this.mapLoadingBool = true
        let layerUrl = iServerHttp() + '/iserver/services/map-fxfzdzzh/rest/maps/dzzh_soft_soil_polygon_evaluate_result@fxfzdzzh'
        if(this.showAreaResults){
          this.showAreaResults = false;
          this.deleteTempLayersSet(layerUrl + '/tempLayersSet/' + this.allRestVectorLayerArray[0].tempLayerId)
          this.$emit("showEvaluateResultSelect", false);
        }else{
          this.mapLoading('正在查询，请稍候...')
          this.showAreaResults = true;
          this.deleteIserverLayer(layerUrl,"dtcv_id like '%" + this.dtcvId + "%' and type like '%" + this.intensityType + "%'")
          this.$emit("showEvaluateResultSelect", true);
        }
        //关闭全部工具
        this.closeAllToolsBox(null);
      },
      deleteIserverLayer(layerUrl, sqlText) {
        let that = this
        let url = encodeURI(layerUrl + "/tempLayersSet.rjson");
        //查询
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        //获取数据后的处理程序
        httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            let json = httpRequest.responseText;//获取到json字符串，还需解析
            let obj = JSON.parse(json);
            if(obj.length == 0) {
              that.createRestMapTempLayersSet(layerUrl, sqlText)
            }else {
              that.deleteIservertemplent(obj,layerUrl, sqlText);//删除超图临时图层
            }
          }
        };
      },
      createRestMapTempLayersSet(layerUrl,sqlText){//查询REST图层信息并创建新的临时图层
        let url = encodeURI(layerUrl +"/layers.rjson");
        let that = this;
        //查询REST图层信息
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        //获取数据后的处理程序
        httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            let json = httpRequest.responseText;//获取到json字符串，还需解析
            let obj = JSON.parse(json);
            if(obj.length>0){
              if(sqlText!=null && sqlText!=""){
                for(let i=0;i<obj.length;i++){
                  let layers = obj[i].subLayers.layers;
                  for(let j=0;j<layers.length;j++){
                    layers[j].displayFilter = sqlText;//SQL查询过滤
                  }
                  console.log('测试qwe')
                  console.log(layers)
                }
              }
              console.log(obj)
              that.postTempLayersSet(layerUrl,obj);//创建并获取超图临时图层
            }
          }
        };
      },
      postTempLayersSet(layerUrl,obj){//创建并获取超图临时图层
        let that = this;
        let url = encodeURI(layerUrl+"/tempLayersSet.rjson");
        let entry = JSON.stringify(obj);
        let xhr = new XMLHttpRequest();//第一步：建立所需的对象
        xhr.open("POST", url, true);//第二步：打开连接  将请求参数写在url中
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        //获取数据后的处理程序
        xhr.onreadystatechange = function(){
          let readyState = xhr.readyState;
          if (readyState == 4){
            let status = xhr.status;
            let responseText =  xhr.responseText ;
            let result = JSON.parse(responseText);
            if(result.succeed){
              let layerID = result.newResourceID
              //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
              that.createMapRestLayer(layerUrl,layerID);
            }
            xhr.onreadystatechange = function(){};
            xhr = null;
          }
        };
        xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
      },
      //REST图层查询
      createMapRestLayer(layerUrl,layerID){//根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
        let that = this;
        //瓦片地图图层
        let mapService = new MapService(layerUrl);//根据超图REST图层获取图层信息
        mapService.getMapInfo(function (serviceResult) {
          if(serviceResult.result!=undefined){
            let mapJSONObj = serviceResult.result;
            let layerName = mapJSONObj.name;//图层名称
            //获取图层范围
            let bounds = mapJSONObj.bounds;
            let left = bounds.left;
            let bottom = bounds.bottom;
            let right = bounds.right;
            let top = bounds.top;
            let origin = [left, top];//左上角
            let extent = [left, bottom, right, top];//图层范围
            //获取超图发布的REST图层（自定义比例尺）
            let layer = getRESTLayer(layerUrl,layerID,origin,extent,mapJSONObj,17);
            let url = iServerHttp() + '/iserver/services/map-fxfzdzzh/rest/maps/dzzh_soft_soil_evaluate_result@fxfzdzzh'
            if(layerUrl == url) {
              layer.setZIndex(6)
            }else{
              layer.setZIndex(3)
            }
            //添加到REST图层数组
            let selectLayer = {
              code:1,//图层类型code
              name:layerName,//图层名称
              layerUrl: layerUrl,
              restTileLayer: layer,//REST瓦片图层
              sqlText:'',//查询条件
              tempLayerId: layerID,//临时图层ID
            };
            //添加超图图层数组
            if(that.pointOrPolygon == 'polygon') {
              if(that.allRestVectorLayerArray.length == 1 ){
                that.map.removeLayer(that.allRestVectorLayerArray[0].restTileLayer);
              }
              that.allRestVectorLayerArray[0] = selectLayer;
            }else{
              if(that.allRestVectorLayerArrayPoint.length == 1 ){
                that.map.removeLayer(that.allRestVectorLayerArrayPoint[0].restTileLayer);
              }
              that.allRestVectorLayerArrayPoint[0] = selectLayer;
            }
            setTimeout( () => {
              that.map.addLayer(layer);
              //缩放到图层范围
              //that.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
              if(that.taskGoem != ''){
                let feature =new WKT().readFeature(that.taskGoem)
                let extent = feature.getGeometry().getExtent();
                let allCoordinates = []
                if(extent.length==4){
                  //全部经纬度--左下角
                  allCoordinates.push([extent[0],extent[1]]);
                  //全部经纬度--右上角
                  allCoordinates.push([extent[2],extent[3]]);
                }
                that.showBoundingExtent(allCoordinates);//缩放到区域位
              }
              that.mapLoading(null)
            },200)
            //图层范围
            let bbox = extent.join(",");
            //获取图例
            let type = this.estimateModelType
            if(type == '指数模型' || type == '逻辑斯蒂模型') {
              that.getLayerLegend('Ⅸ度滑坡风险',layerUrl,bbox);//根据url获取图层图例信息
            }else if(type == 'Newmark模型') {
              that.getLayerLegend('滑坡发生概率',layerUrl,bbox);//根据url获取图层图例信息
            }else {
              // that.getLayerLegend('',layerUrl,bbox);//根据url获取图层图例信息
              if(that.pointOrPolygon == 'point') {//钻孔结果
                that.getLayerLegend('钻孔结果',layerUrl,bbox);//根据url获取图层图例信息
              }else if(that.pointOrPolygon == 'polygon') {//区域结果
                that.getLayerLegend('区域结果',layerUrl,bbox);//根据url获取图层图例信息
              }else{
                that.getLayerLegend('',layerUrl,bbox);//根据url获取图层图例信息
              }
            }
          }
        });
      },
      showBoundingExtent(coordinates){//缩放到区域位置
				console.log("缩放到区域位置");
				if (coordinates!=null && coordinates.length > 1) {
					const extent = boundingExtent(coordinates);
					//this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
					this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
					//获取默认位置
					this.center = this.map.getView().getCenter();
					this.zoom = this.map.getView().getZoom();
				}
			},
      deleteIservertemplent(obj,layerUrl, sqlText) {
        let that = this
        for(let i=0;i<obj.length;i++){
          let path = obj[i].path;
          let url = encodeURI(path);
          let xhr = new XMLHttpRequest();//第一步：建立所需的对象
          xhr.open("DELETE", url, true);//第二步：打开连接  将请求参数写在url中
          xhr.send();//第三步：发送请求  将请求参数写在URL中
          // 获取数据后的处理程序
          xhr.onreadystatechange = function(){
            let readyState = xhr.readyState;
            if (readyState == 4){
              let status = xhr.status;
              let responseText =  xhr.responseText ;
              if(i == obj.length -1) {
                that.createRestMapTempLayersSet(layerUrl, sqlText)
              }
              xhr.onreadystatechange = function(){};
              xhr = null;
            }
          };
        }
      },
      deleteTempLayersSet(url){//删除超图临时图层
        if(this.pointOrPolygon == 'polygon') {
          this.map.removeLayer(this.allRestVectorLayerArray[0].restTileLayer);
        }else{
          this.map.removeLayer(this.allRestVectorLayerArrayPoint[0].restTileLayer);
        }
        // this.allRestVectorLayerArray = []
        url = encodeURI(url);
        let xhr = new XMLHttpRequest();//第一步：建立所需的对象
        xhr.open("DELETE", url, true);//第二步：打开连接  将请求参数写在url中
        xhr.send();//第三步：发送请求  将请求参数写在URL中
        // 获取数据后的处理程序
        xhr.onreadystatechange = function(){
          let readyState = xhr.readyState;
          if (readyState == 4){
            let status = xhr.status;
            let responseText =  xhr.responseText ;
            // let result = JSON.parse(responseText);
            // if(result.succeed){
            //   //that.$message({ message: '删除临时图层成功!', type: 'success' });
            // }else{
            //   //that.$message({ message: '删除临时图层失败!', type: 'warning' });
            // }
            xhr.onreadystatechange = function(){};
            xhr = null;
          }
        };
      },
      getLayerLegend(realName,layerUrl,bbox){//根据url获取图层图例信息
        let that = this;
        layerUrl += '/legend.json?bbox=' + bbox;
        layerUrl += '&returnVisibleOnly=false';//是否只返回当前地图范围内可见要素的图例。默认为 false
        //图层图例信息查询
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', layerUrl, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
        * 获取数据后的处理程序
        */
        httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            let json = httpRequest.responseText;//获取到json字符串，还需解析
            let obj = JSON.parse(json);
            let layerLegends = obj.layerLegends;
            if(layerLegends!=null && layerLegends.length>0){
              let html = '';
              for(let i=0;i<layerLegends.length;i++){
                let layerLegend = layerLegends[i];
                //获取图层名称
                let layerName = layerLegend.layerName;
                let legends = layerLegend.legends;
                if(legends!=null && legends.length>0){
                  if(layerName.indexOf("#")!=-1 && legends.length==1){
                    let textImgUrl = iServerHttp() + "/iserver/manager/static/Theme/image/LabelUniform.png";
                    //文字图层不显示图例
                    if(legends[0].url==textImgUrl){
                      continue;
                    }
                  }
                  if(legends.length>1){//多图例图层
                    html += '<p style="text-align: center;font-weight: bold;">'+realName+'</p>';
                    for(let j=0;j<legends.length;j++){
                      let legend = legends[j];
                      let values = legend.values;
                      if(values==null){
                        continue;
                      }
                      let imageData = legend.imageData;
                      let contentType = legend.contentType;
                      let url = legend.url;
                      let label = legend.label;
                      let width = legend.width;
                      let height = legend.height;
                      let imgSrc = "data:image/jpeg;base64,"+imageData;
                      html += '<p style="height: '+height+'px;">';
                      html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                      html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+label+'</span>';
                      html += '</p>';
                    }
                  }else{//单一图例图层
                    let legend = legends[0];
                    let values = legend.values;
                    let imageData = legend.imageData;
                    let contentType = legend.contentType;
                    let url = legend.url;
                    let label = legend.label;
                    let width = legend.width;
                    let height = legend.height;
                    let imgSrc = "data:image/jpeg;base64,"+imageData;
                    html += '<p style="height: '+height+'px;">';
                    html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                    html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+realName+'</span>';
                    html += '</p>';
                  }
                }
              }
              //图例html
              that.$emit("getLegendHtml",{name:realName,legendHtml:html,show:true});
            }
          }
        };
      },
      //关闭全部工具
      closeAllToolsBox(type){
        //关闭测量工具
        if(type!="MeasureTool" && this.showHideMeasureTool==false){
          this.showHideMeasureTool = true;
          let divId = this.str+"-MeasureToolsDiv";
          //隐藏
          document.getElementById(divId).style.display = "none";
          //清空测量结果
          this.clearMeasure();
          this.clearMeasureBool = true;
        }
        //关闭定位工具
        if(type!="PositionTool" && this.showHidePositionTool==false){
          this.showHidePositionTool = true;
          let divId = this.str+"-MousePositionDiv";
          //隐藏
          document.getElementById(divId).style.display = "none";
          //清空定位结果
          this.clearPosition();
        }
      },
      //地图工具--测试地图打印功能
      toolsBoxPrintTest(){
        let that = this;
        //测试地图导出方法一
        /*this.map.once('rendercomplete', function () {
          const mapCanvas = document.createElement('canvas');
          const size = that.map.getSize();
          mapCanvas.width = size[0];
          mapCanvas.height = size[1];
          const mapContext = mapCanvas.getContext('2d');
          Array.prototype.forEach.call(
              //document.querySelectorAll('.ol-layer canvas'),
              document.querySelectorAll('#dpaIndexMap-map .ol-viewport .ol-layer canvas'),
              function (canvas) {
                if (canvas.width > 0) {
                  const opacity = canvas.parentNode.style.opacity;
                  mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                  const transform = canvas.style.transform;
                  // Get the transform parameters from the style's transform matrix
                  const matrix = transform
                      .match(/^matrix\(([^\(]*)\)$/)[1]
                      .split(',')
                      .map(Number);
                  // Apply the transform to the export map context
                  CanvasRenderingContext2D.prototype.setTransform.apply(
                      mapContext,
                      matrix
                  );
                  mapContext.drawImage(canvas, 0, 0);
                }
              }
          );
          if (navigator.msSaveBlob) {
            // link download attribute does not work on MS browsers
            navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
          } else {
            const link = document.getElementById('image-download');
            link.crossOrigin = 'anonymous';
            link.href = mapCanvas.toDataURL();
            link.click();
          }
        });
        this.map.renderSync();*/
  
  
        //测试地图导出方法二
        /*let exportPNGElement = document.getElementById('export-png'); //导出图片功能项
        let manypng = document.getElementById('manypng'); //导出图片功能项
        if ('download' in exportPNGElement) {
          exportPNGElement.addEventListener('click', function (e) {
            that.map.once('postcompose', function (event) {
              let canvas = event.context.canvas; //地图渲染容器
              exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
            });
            that.map.renderSync();
          }, false);
        } else {
          alert("浏览器不支持此导出地图图片功能！");
        }
  
        if ('download' in manypng) {
          manypng.addEventListener('click', function(e) {
            //  that.map.removeInteraction(draw);
            addInteraction();
            that.map.renderSync();
          },false);
        }
  
        let draw; // global so we can remove it later
        let source = new VectorSource();
        function addInteraction() {
          draw = new Draw({
            source: source,
            type: 'LineString',
            style: new Style({
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              }),
              image: new CircleStyle({
                radius: 7,
                fill: new Fill({
                  color: '#ffcc33'
                })
              })
            }),
            maxPoints: 2,
            geometryFunction: createBox()//矩形框
          })
  
          that.map.addInteraction(draw);
  
          // that.map.values_.target='map2';
  
          function getXDis(e, number) {
            let min = undefined;
            let max = undefined;
            e.forEach(element => {
              if (min == undefined || element[number] < min) {
                min = element[number];
              }
  
              if (max == undefined || element[number] > max) {
                max = element[number];
              }
            });
            return [min+2, max - min-4];
          }
  
          let extent = [];
          draw.on('drawend',function(evt){
            let feature = evt.feature;console.log(feature);
            let ftarget = evt.target.a;
            let geometry=feature.getGeometry();
            let ext=geometry.getExtent();
            that.map.removeInteraction(draw);
  
            let r = that.map.getView().getResolutionForExtent(ext, that.map.getSize());//根据范围获取分辨率
            that.map.getView().setResolution(r);
            that.map.getView().setZoom(12);
            let centerone=olExtent.getCenter(ext);
            that.map.getView().setCenter(centerone);
  
            let canvas;
            let imageData;
            let canvas2;
            let coordinate=geometry.getCoordinates();
            that.map.once("postrender", function (e) {
              extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
              extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
              extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
              extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);
  
              let x_dx = getXDis(extent, 0);
              let y_dy = getXDis(extent, 1);
  
              that.map.once("postcompose", function(event) {
                canvas = event.context.canvas;
                let ctx2=canvas.getContext("2d");
                imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]);
                let c=document.getElementById("dpaIndexMap-map");
                c.style.width=imageData.width+'px';
                c.style.height=imageData.height+'px';
                that.map.updateSize();//容器改变重新加载地图
              });
              that.map.once('rendercomplete',function(){//渲染完成
                canvas.toBlob(function (blob) {
                  saveAs(blob, 'map.png');
                  $('#dpaIndexMap-map').css({
                    width:"100%",
                    height:"100%"
                  });
                  that.map.updateSize();//容器改变重新加载地图
                });
              });
            });
          });
        }*/
      },
      addIserverLayer(value) {// 添加超图服务显示到地图
        let that = this
        if (value.data) {
          if (value.layerState) {// 添加数据图层
            let mapService = new MapService(value.data.url);//根据超图矢量瓦片图层获取图层信息
            let layer
            mapService.getMapInfo(function (serviceResult) {
              if(serviceResult.result!=undefined){
                let mapJSONObj = serviceResult.result;
                let bounds = mapJSONObj.bounds;
                let left = bounds.left;
                let bottom = bounds.bottom;
                let right = bounds.right;
                let top = bounds.top;
                let origin = [left, top];//左上角
                let extent = [left, bottom, right, top];//图层范围
                layer = getRESTLayer(value.data.url,'',origin,extent,'',10)
                that.map.addLayer(layer)
                that.mapLoading(null)
                that.map.getView().fit(extent, {padding: [100, 100, 100, 100]});
              }
            })
          } else { // 移除数据图层
            let layers = that.map.getLayers()
            let index = -1
            for(let i=0;i<layers.array_.length;i++){
              if (layers.array_[i].values_.source.options) {
                if (value.data.url == layers.array_[i].values_.source.options.url) {
                  index = i
                }
              }	
            }
            that.map.removeLayer(layers.array_[index])
          }
        }
      },
      mapLoading(msg){//地图查询Loading
        if(this.mapLoadingBool){
          this.$emit("mapLoading",msg);
        }
      },
      measureToolBox(){//测量工具Div
        let divId = this.str+"-MeasureToolsDiv";
        //关闭全部工具
        this.closeAllToolsBox("MeasureTool");
        if(this.showHideMeasureTool){
          this.showHideMeasureTool = false;
          //显示
          document.getElementById(divId).style.display = "block";
        }else{
          this.showHideMeasureTool = true;
          //隐藏
          document.getElementById(divId).style.display = "none";
        }
      },
      measureDistance(){//测距
        if(this.source!=null){
          //地图工具箱--开启测距
          this.setMapToolBox('MeasureDistance');
          //设置样式
          this.measureDistanceBool = false;
          this.measureAreaBool = true;
          this.stopMeasureBool = true;
          this.clearMeasureBool = true;
        }
      },
      measureArea(){//测面
        if(this.source!=null){
          //地图工具箱--开启测面
          this.setMapToolBox('MeasureArea');
          //设置样式
          this.measureAreaBool = false;
          this.measureDistanceBool = true;
          this.stopMeasureBool = true;
          this.clearMeasureBool = true;
        }
      },
      stopMeasure(){//停止测量
        if(this.source!=null){
          //地图工具箱--停止测量
          this.setMapToolBox('StopMeasure');
          //设置样式
          this.stopMeasureBool = false;
          this.measureDistanceBool = true;
          this.measureAreaBool = true;
          this.clearMeasureBool = true;
        }
      },
      clearMeasure(){//清空测量结果
        if(this.source!=null){
          //地图工具箱--清空测量结果
          this.setMapToolBox('ClearMeasure');
          //设置样式
          this.clearMeasureBool = false;
          this.measureDistanceBool = true;
          this.measureAreaBool = true;
          this.stopMeasureBool = true;
        }
      },
      positionToolBox(){//定位工具Div
        let divId = this.str+"-MousePositionDiv";
        //关闭全部工具
        this.closeAllToolsBox("PositionTool");
        if(this.showHidePositionTool){
          this.showHidePositionTool = false;
          //显示
          document.getElementById(divId).style.display = "block";
        }else{
          this.showHidePositionTool = true;
          //隐藏
          document.getElementById(divId).style.display = "none";
        }
      },
      addPosition(){//添加定位结果
        this.clearPositionBool = true;
        this.addPositionBool = false;
        //添加定位结果
        if(this.source!=null){
          let longitude = document.getElementById(this.str+"-MousePositionLon").value;
          let latitude = document.getElementById(this.str+"-MousePositionLat").value;
          //处理经纬度
          let lonlat = this.getLonLat(longitude,latitude);
          if(lonlat!=null){
            //点
            let featureTmp = new Feature({
              geometry: new Point(lonlat)
            });
            //样式
            let style = this.getPointStyle();
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({
              type:"position",
              longitude:longitude,
              latitude:latitude,
            });
            //添加定位点
            this.source.addFeature(featureTmp);
            //居中缩放
            this.map.getView().setCenter(lonlat);
            this.map.getView().setZoom(12);
          }
        }
      },
      clearPosition(){//清空定位结果
        this.clearPositionBool = false;
        this.addPositionBool = true;
        //地图工具箱--清空
        this.setMapToolBox("Clear");
      },
      //地图工具箱
      setMapToolBox(value){
        let that = this;
        if (value === 'Clear') {//清空
          //清空
          that.source.clear();
          //停止绘制|修改|拖拽|选择
          clearInteraction();
        }else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
          //点|线|面|圆绘制
          //开启绘制
          startDrawInteraction(value,false);
        }else if (value === 'CircleRadius') {//开启绘制圆心，输入半径生成圆
          //开启绘制圆心点
          startDrawInteraction("Point",false);
        }else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
          //手绘线|手绘面
          value = value.split("FreeHand")[1];
          //开启绘制
          startDrawInteraction(value,true);
        }else if (value === 'StopDraw') {//停止绘制
          //停止绘制
          stopDrawInteraction();
        }else if (value === 'Snap') {//开启捕捉
          //开启捕捉
          startSnapInteraction();
        }else if (value === 'NotSnap') {//停止捕捉
          //停止捕捉
          stopSnapInteraction();
        }else if (value === 'Modify') {//开启修改
          //开启修改
          startModifyInteraction();
        }else if (value === 'NotModify') {//停止修改
          //停止修改
          stopModifyInteraction();
          //停止选择
          stopSelectInteraction();
        }else if (value === 'Drag') {//开启拖拽
          //开启拖拽
          startDragInteraction();
        }else if (value === 'NotDrag') {//停止拖拽
          //停止拖拽
          stopDragInteraction();
        }else if (value === 'Select') {//开启选择
          //开启选择
          startSelectInteraction();
        }else if (value === 'NotSelect') {//停止选择
          //停止选择
          stopSelectInteraction();
        } else if (value === 'MeasureDistance') {//开启测距
          //开启测距
          startMeasureInteraction('LineString');
        } else if (value === 'MeasureArea') {//开启测面
          //开启测面
          startMeasureInteraction('Polygon');
        } else if (value === 'StopMeasure') {//停止测量（测距|测面）
          //停止测量
          stopMeasureInteraction();
        } else if (value === 'ClearMeasure') {//清空测量结果
          //停止测量
          stopMeasureInteraction();
          //清空测量结果
          clearMeasureResult();
        }
  
        //停止绘制|修改|拖拽|选择
        function clearInteraction() {
          //停止拖拽
          stopDragInteraction();
          //停止修改
          stopModifyInteraction();
          //停止选择
          stopSelectInteraction();
          //停止绘制
          stopDrawInteraction();
        }
  
        //停止捕捉
        function stopSnapInteraction(){
          if (that.snap) {
            that.map.removeInteraction(that.snap);
            that.snap = null;
          }
        }
  
        //开启捕捉
        function startSnapInteraction(){
          //停止捕捉
          stopSnapInteraction();
          //开启捕捉
          that.snap = new Snap({
            source: that.source
          });
          that.map.addInteraction(that.snap);
        }
  
        //停止拖拽
        function stopDragInteraction() {
          //停止拖拽
          if (that.drag) {
            that.map.removeInteraction(that.drag);
            that.drag = null;
          }
        }
  
        //开启拖拽
        function startDragInteraction() {
          //停止绘制
          stopDrawInteraction();
          //停止修改
          stopModifyInteraction();
          //开启选择
          startSelectInteraction();
          //停止拖拽
          stopDragInteraction();
          //开启拖拽
          that.drag = new Translate({
            features: that.select.getFeatures()
          });
          that.map.addInteraction(that.drag);
        }
  
        //停止修改
        function stopModifyInteraction() {
          //停止修改
          if (that.modify) {
            that.map.removeInteraction(that.modify);
            that.modify = null;
            if(that.pageType=='分布规律分析页面'){
              //获取绘制数据进行分布规律分析
              that.getAllDrawGeomEmit();
            }
          }
        }
  
        //开启修改
        function startModifyInteraction() {
          //停止绘制
          stopDrawInteraction();
          //开启选择
          startSelectInteraction();
          //停止修改
          stopModifyInteraction();
          //开启修改
          that.modify = new Modify({
            features: that.select.getFeatures()
          });
          that.map.addInteraction(that.modify);
        }
  
        //停止选择
        function stopSelectInteraction() {
          //停止选择
          if (that.select) {
            that.map.removeInteraction(that.select);
            that.select = null;
          }
        }
  
        //开启选择
        function startSelectInteraction() {
          //停止选择
          stopSelectInteraction();
          //开启选择
          that.select = new Select({
            wrapX: false,
            filter:(feature, layer)=>{
              //过滤可选择的要素
              let temp = feature.getProperties();
              if(that.pageType=='分布规律分析页面') {
                if (temp.type == "draw") {//地图圈选
                  return true;
                }
              }
  
              return false;
            }
          });
          that.map.addInteraction(that.select);
        }
  
        //停止绘制
        function stopDrawInteraction() {
          //停止绘制
          if (that.draw) {
            that.map.removeInteraction(that.draw);
            that.draw = null;
          }
        }
  
        //开启绘制
        function startDrawInteraction(type,bool) {
          //停止拖拽
          stopDragInteraction();
          //停止修改
          stopModifyInteraction();
          //停止选择
          stopSelectInteraction();
          //停止绘制
          stopDrawInteraction();
          if(bool){//手绘线|手绘面
            that.draw = new Draw({
              source: that.source,
              type: type,
              snapTolerance: 20,
              freehand: true
            });
            that.map.addInteraction(that.draw);
          }else{//点|线|面|圆绘制
            that.draw = new Draw({
              source: that.source,
              type: type,
              snapTolerance: 20
            });
            that.map.addInteraction(that.draw);
          }
          //完成绘制事件
          that.draw.on('drawend', function (evt) {
            if(that.pageType=='分布规律分析页面'){
              //是否开启地图圈选查询
              if(that.queryMapDrawType=="Polygon" || that.queryMapDrawType=="Circle"){
                //停止绘制
                stopDrawInteraction();
                evt.feature.setProperties({
                  type:"draw",//类型
                });
                // //获取空间数据
                // let geom = evt.feature.getGeometry();
                // if (geom instanceof Polygon) {
                //   let coords = geom.getCoordinates()[0];
                //   if(coords.length>0){
                //     let polygonWkt = "POLYGON((";
                //     for(let i=0;i<coords.length;i++){
                //       if(i>0){
                //         polygonWkt += ",";
                //       }
                //       let lonlat = coords[i];
                //       polygonWkt += lonlat[0]+" "+lonlat[1];
                //     }
                //     polygonWkt += "))";
                //   }
                // }else{//圆形
                //   geom = new fromCircle(geom);//圆转多边形，用于空间查询
                //   let coords = geom.getCoordinates()[0];
                //   if(coords.length>0){
                //     let polygonWkt = "POLYGON((";
                //     for(let i=0;i<coords.length;i++){
                //       if(i>0){
                //         polygonWkt += ",";
                //       }
                //       let lonlat = coords[i];
                //       polygonWkt += lonlat[0]+" "+lonlat[1];
                //     }
                //     polygonWkt += "))";
                //   }
                // }
                setTimeout(function(){
                  //获取绘制数据进行分布规律分析
                  that.getAllDrawGeomEmit();
                },100);
              }
            }
          });
        }
  
        //计算面积
        function getPolygonArea (polygon) {
          // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
          const area = getArea(polygon, {projection: 'EPSG:4490'})
          let output = Math.round((area / 1000000) * 100) / 100;//平方公里
          return output;
        }
  
        ////////////////////////////////////////////////////////////////////测量工具箱
        //格式化距离
        function formatLength(line) {
          const length = getLength(line, {projection: 'EPSG:4490'});
          let output;
          if (length > 100) {
            output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
          } else {
            output = Math.round(length * 100) / 100 + ' ' + 'm';
          }
          return output;
        }
  
        //格式化面积
        function formatArea(polygon) {
          const area = getArea(polygon, {projection: 'EPSG:4490'});
          let output;
          if (area > 10000) {
            output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
          } else {
            output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
          }
          return output;
        }
  
        //创建新的提示tip
        function createHelpTooltip() {
          if (that.helpTooltipElement!=null) {
            that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
          }
          that.helpTooltipElement = document.createElement('div');
          that.helpTooltipElement.className = 'ol-tooltip hidden';
          that.helpTooltip = new Overlay({
            element: that.helpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left',
          });
          that.map.addOverlay(that.helpTooltip);
        }
  
        //创建新的测量提示
        function createMeasureTooltip() {
          if (that.measureTooltipElement!=null) {
            that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
          }
          that.measureTooltipElement = document.createElement('div');
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
          that.measureTooltip = new Overlay({
            element: that.measureTooltipElement,
            offset: [0, -15],
            positioning: 'bottom-center',
            stopEvent: false,
            insertFirst: false,
          });
          that.map.addOverlay(that.measureTooltip);
        }
  
        //开启测量工具
        function startMeasureInteraction(type) {
          //停止测量工具
          stopMeasureInteraction();
  
          console.log(type);
          //开启测量工具--绘制
          that.measure = new Draw({
            source: that.measureSource,
            type: type,
            style: new Style({
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.5)',
                lineDash: [10, 10],
                width: 2,
              }),
              image: new CircleStyle({
                radius: 5,
                stroke: new Stroke({
                  color: 'rgba(0, 0, 0, 0.7)',
                }),
                fill: new Fill({
                  color: 'rgba(255, 255, 255, 0.2)',
                }),
              }),
            }),
          });
          that.map.addInteraction(that.measure);
  
          //创建新的测量提示
          createMeasureTooltip();
          //创建新的提示tip
          createHelpTooltip();
  
          let listener;
          that.measure.on('drawstart', function (evt) {
            //设置sketch
            that.sketch = evt.feature;
  
            let tooltipCoord = evt.coordinate;
  
            listener = that.sketch.getGeometry().on('change', function (evt) {
              const geom = evt.target;
              let output;
              if (geom instanceof Polygon) {
                output = formatArea(geom);
                tooltipCoord = geom.getInteriorPoint().getCoordinates();
              } else if (geom instanceof LineString) {
                output = formatLength(geom);
                tooltipCoord = geom.getLastCoordinate();
              }
              that.measureTooltipElement.innerHTML = output;
              that.measureTooltip.setPosition(tooltipCoord);
            });
          });
          //完成测量绘制
          that.measure.on('drawend', function () {
            that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
            that.measureTooltip.setOffset([0, -7]);
            //添加到数组
            that.measureTooltipArray.push(that.helpTooltip);
            //添加到数组
            that.measureTooltipArray.push(that.measureTooltip);
            //清空sketch
            that.sketch = null;
            //清空tooltip
            that.measureTooltipElement = null;
            createMeasureTooltip();
            unByKey(listener);
          });
        }
  
        //停止测量工具
        function stopMeasureInteraction() {
          //停止绘制
          stopDrawInteraction();
          //停止测量工具
          if (that.measure) {
            that.map.removeInteraction(that.measure);
            that.measure = null;
            //隐藏提示tip
            that.helpTooltipElement.classList.add('hidden');
            //移除测量提示
            if(that.helpTooltip!=null){
              that.map.removeOverlay(that.helpTooltip);
            }
            if(that.measureTooltip!=null){
              that.map.removeOverlay(that.measureTooltip);
            }
          }
        }
  
        //清空测量结果
        function clearMeasureResult(){
          if(that.measureSource!=null){
            //清空测量结果
            that.measureSource.clear();
            //清空测量结果提示数组
            if(that.measureTooltipArray.length>0){
              for(let i=0;i<that.measureTooltipArray.length;i++){
                that.map.removeOverlay(that.measureTooltipArray[i]);
              }
              that.measureTooltipArray = [];
            }
          }
        }
      },
      getPolyonStyle(color){//多边形样式
        let style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//描绘
            width:2,//宽
            color:color
          })
        });
  
        return style;
      },
      getPointStyle(){//点图标样式
        let style = new Style({
          image: new Icon({
            src: dingweiImg,
            anchor: [0.5, 1]
          }),
        });
  
        return style;
      },
      getLineStringStyle(color){//线样式
        let style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          })
        });
  
        return style;
      },
      //处理经纬度
      getLonLat(longitude,latitude){
        let lonlat = null;
        if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
          let lon = Number(longitude);
          let lat = Number(latitude);
          if(lon>0 && lon<180 && lat>0 && lat<90){
            lonlat = [lon,lat];
          }
        }
  
        return lonlat;
      },
      //分布规律分析页面
      showPattenAnalysis(){//规律分析
        if(this.showPattenAnalysisBool){
          this.showPattenAnalysisBool = false;
          this.$emit("showPattenAnalysis",false);
        }else{
          this.showPattenAnalysisBool = true;
          this.$emit("showPattenAnalysis",true);
        }
      },
      //是否开启地图圈选查询
      queryMapEvent(){
        if(this.map!=null){
          this.editGeomBool = false;
          if(this.queryMapDrawType=="Polygon"){
            //地图工具箱--开启多边形绘制
            this.setMapToolBox("Polygon");
          }else if(this.queryMapDrawType=="Circle"){
            //地图工具箱--开启圆形绘制
            this.setMapToolBox("Circle");
          }else if(this.queryMapDrawType=="CircleRadius"){
            // //地图工具箱--开启圆心绘制
            // this.setMapToolBox("CircleRadius");
            // //根据开启圆形绘制
            // let meter = 1000;//米
            // let degree = meterToDegree(meter);
            // let circle = new Circle([116, 39], degree); // 用圆心和半径确定一个圆
            // // let polygon = new fromCircle(circle) // 得到一个多边形
            // let feature = new Feature({
            //   geometry: circle
            // });
            // this.source.addFeature(feature);
          }else if(this.queryMapDrawType=="StopDraw"){
            //地图工具箱--停止绘制
            this.setMapToolBox("StopDraw");
          }else if(this.queryMapDrawType=="Clear"){
            //地图工具箱--清空
            this.setMapToolBox("Clear");
          }else if(this.queryMapDrawType=="Select"){
            //地图工具箱--开启选择
            this.setMapToolBox("Select");
          }
        }
      },
      //获取绘制数据进行分布规律分析
      getAllDrawGeomEmit(){
        let list = [];
        //获取全部绘制的空间数据
        let features = this.source.getFeatures();
        // console.log("获取绘制数据进行分布规律分析");
        // console.log(features);
        if(features!=null && features.length>0) {
          for (let i = 0; i < features.length; i++) {
            let feature = features[i];
            let geom = feature.getGeometry();
            if (geom instanceof Polygon) {//多边形
              let coords = geom.getCoordinates()[0];
              if(coords.length>0){
                let polygonWkt = "POLYGON((";
                for(let i=0;i<coords.length;i++){
                  if(i>0){
                    polygonWkt += ",";
                  }
                  let lonlat = coords[i];
                  polygonWkt += lonlat[0]+" "+lonlat[1];
                }
                polygonWkt += "))";
                list.push(polygonWkt);
              }
            }else if (geom instanceof Point) {
              //点
            }else if (geom instanceof LineString) {
              //线
            }else{//圆形
              geom = new fromCircle(geom);//圆转多边形，用于空间查询
              let coords = geom.getCoordinates()[0];
              if(coords.length>0){
                let polygonWkt = "POLYGON((";
                for(let i=0;i<coords.length;i++){
                  if(i>0){
                    polygonWkt += ",";
                  }
                  let lonlat = coords[i];
                  polygonWkt += lonlat[0]+" "+lonlat[1];
                }
                polygonWkt += "))";
                list.push(polygonWkt);
              }
            }
          }
        }
        // console.log(list);
        //地图圈选查询
        this.$emit("getAllDrawGeom",list);
        //隐藏右键菜单窗口
        this.contextmenuLayer.setPosition(undefined);
      },
      //设置半径
      setCircleRadius(){
        if(this.selectFeatureType=="CircleDraw"){
          if(this.circleRadiusDialogBool){
            let meter = this.circleRadiusNum;//米
            if(!isNaN(meter) && Number(meter)>0){
              let degree = meterToDegree(Number(meter));
              this.selectFeature.getGeometry().setRadius(degree);
              this.circleRadiusDialogBool = false;
            }else{
              ElMessage.warning("请输入正数");
            }
          }else{
            let meter = degreeToMeter(this.selectFeature.getGeometry().getRadius());
            this.circleRadiusNum = meter.toFixed(2);//保留2位小数
            this.circleRadiusDialogBool = true;
          }
          //隐藏右键菜单窗口
          this.contextmenuLayer.setPosition(undefined);
        }
      },
      //修改区域
      editDrawGeom(){
        if(this.editGeomBool){
          this.editGeomBool = false;
          //地图工具箱--停止修改
          this.setMapToolBox('NotModify');
        }else{
          this.editGeomBool = true;
          //地图工具箱--开启修改
          this.setMapToolBox('Modify');
        }
        //隐藏右键菜单窗口
        this.contextmenuLayer.setPosition(undefined);
      },
      //删除区域
      deleteDrawGeom(){
        if(this.selectFeatureType=="xzqh"){
          //行政区划
        }else{//地图圈选
          //移除要素
          this.source.removeFeature(this.selectFeature);
          //隐藏右键菜单窗口
          this.contextmenuLayer.setPosition(undefined);
          //获取绘制数据进行分布规律分析
          this.getAllDrawGeomEmit();
        }
      },
      getSelectPolyonStyle(){//选中要素样式
        let style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(255,255,255,0.2)"
          }),
          stroke:new Stroke({//描绘
            width:2,//宽
            color:"rgba(30,144,255,1)"
          })
        });
        return style;
      },
      showImgcreate(){//生成图件
        let params = {
          bool: false,
          name: this.allRestVectorLayerArray[0].tempLayerId,
          url: this.allRestVectorLayerArray[0].layerUrl + '/tempLayersSet/' + this.allRestVectorLayerArray[0].tempLayerId
        }
        if(this.showImgcreateBool){
          this.showImgcreateBool = false;
          this.$emit("showImgcreate",params);
        }else{
          this.showImgcreateBool = true;
          params.bool = true
          this.$emit("showImgcreate",params);
        }
      },
      // 返回上一页面
      returnLastPage() {
        if(!this.isReturnLastPage){
          this.isReturnLastPage = true;
          this.$emit("returnSetPage",true);
        }
      }
    }
  }
  
  </script>
  
  <style scoped lang="scss">
  .init-spanBottom {
    border:0;
  }
  .new-contextmenu p {
    width:110px;cursor:pointer;padding:5px;margin-top: 5px;margin-bottom: 5px;
  }
  .new-contextmenu p:hover {
    background: rgba(14, 94, 180, 0.4);border: 1px solid #707070;
  }
  .new-contextmenu div {
    width:100%;
    border-bottom: 1px dashed white;
  }
  </style>